<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #chess{
      border : 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>

<script>
  let chess = document.getElementById("chess");
  let context = chess.getContext("2d");

  context.strokeStyle = "#0A0A0A";

  let logo = new Image();
  logo.src = "../../assets/imgs/山020.jpg";

  //图片加载完毕后的回调方法
  logo.onload = function(){
    //画键盘
    context.drawImage(logo, 0, 0, 450, 450);
    drawChessBorad();

  }

  let drawChessBorad = function(){
    for(let i = 0; i < 15; i++){
      context.moveTo(15 + i*30, 15);
      context.lineTo(15 + i*30, 435);
      context.moveTo(15, 15 + i*30);
      context.lineTo(435, 15 + i*30);
      context.stroke();
    }
  }
</script>
</body>
</html>